import React, { Component } from 'react';
import PropTypes from 'proptypes';
import set from 'lodash.set';
import Select from 'react-select';
import Checkbox from './checkbox.jsx';
import {Button, Form,Modal,Row,Col,OverlayTrigger,Tooltip} from "react-bootstrap"
var { shell } = window.myremote.electron;
const mystyles={
  input:()=>({width:"100px"})
}
export default class SettingsModalForm extends Component {
  static propTypes = {
    onSaveClick: PropTypes.func.isRequired,
    onCancelClick: PropTypes.func.isRequired,
    config: PropTypes.object,
    error: PropTypes.object,
  };

  constructor(props, context) {
    super(props, context);
    this.state = {
      ...props.config.data,
      modalOpen: false,
    };
    if (!this.state.zoomFactor) {
      this.state.zoomFactor = 1;
    }
  }
  componentDidMount() {
    // console.log("settings-modal mount");
  }
  componentWillUnmount() {
    // console.log("settings-modal un mount");
    // this.props.onCancelClick();
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    // console.log(nextProps);
    this.setState({ error: nextProps.error });
    if (!this.props.modalOpen && nextProps.modalOpen) {
      this.onShow();
    } else if (this.props.modalOpen && !nextProps.modalOpen) {
      this.onHide();
    }
  }
  onShow = () => {};
  onHide = () => {
    console.log('onHide');
    //this.props.onCancelClick();
  };

  onSaveClick = () => {
    this.props.onSaveClick(this.mapStateToConfig(this.state));
  };

  onDocClick(event) {
    event.preventDefault();
    shell.openExternal(
      'https://github.com/sqlectron/sqlectron-gui/blob/master/docs/app/configuration-file.md'
    );
  }

  mapStateToConfig(state) {
    const config = {
      zoomFactor: parseFloat(state.zoomFactor) || 1,
      limitQueryDefaultSelectTop:
        parseInt(state.limitQueryDefaultSelectTop, 10) || 100,
      enabledAutoComplete: state.enabledAutoComplete || false,
      enabledLiveAutoComplete: state.enabledLiveAutoComplete || false,
      enabledDarkTheme: state.enabledDarkTheme || false,
    };
    if (!this.state.log) {
      return config;
    }

    const { log } = state;
    config.log = {
      console: log.console,
      file: log.file,
      level: log.level,
      path: log.path,
    };

    return config;
  }

  highlightError(name) {
    const { error } = this.state;
    let hasError = !!(error && error[name]);
    if (error && error.log && /^log\./.test(name)) {
      const logErrors = error.log[0].errors[0];
      const lastName = name.replace(/^log\./, '');
      hasError = !!~Object.keys(logErrors).indexOf(lastName);
    }
    return hasError ? 'error' : '';
  }

  handleChange(event) {
    const newState = {};
    const { target } = event;
    const value = target.files ? target.files[0].path : target.value;
    const name = target.name.replace(/^file\./, '');
    const [name1, name2] = name.split('.');

    if (name1 && name2) {
      newState[name1] = { ...this.state[name1] };
    }

    set(newState, name, value);

    return this.setState(newState);
  }

  handleOnLogLevelChange(level) {
    this.setState({ log: { ...this.state.log, level } });
  }

  renderLogLevelItem({ label, icon }) {
    return (
      <span >
        <i className={`icon ${icon}`} /> {label}
      </span>
    );
  }

  renderActionsPanel() {
    return (
      <React.Fragment>
        <Button
          onClick={this.props.onCancelClick}
          tabIndex="0"
        >
          Cancel
          <i className="fa fa-ban" />
        </Button>
        <Button
          tabIndex="0"
          onClick={this.onSaveClick}
        >
          Save
          <i className="fa fa-check" />
        </Button>
      </React.Fragment>
    );
  }

  renderSettingsPath() {
    return (
      <React.Fragment>
      <Row>
          <Form.Label>Path:</Form.Label><Form.Text>{this.props.config.path}</Form.Text>
      </Row>
      <Row>
        <Form.Text>
          Check out the full settings documentation at <a style={{color:"blue"}}  onClick={this.onDocClick}>here</a>
        </Form.Text>
        
      </Row>
      </React.Fragment>
    );
  }

  renderBasicSettingsPanel() {
    return (
      <div>
        <div className="two fields">
          <div
            className={`field ${this.highlightError(
              'limitQueryDefaultSelectTop'
            )}`}
          >
            <label>Limit of Rows from Select Top Query</label>
            <input
              type="number"
              name="limitQueryDefaultSelectTop"
              value={this.state.limitQueryDefaultSelectTop || ''}
              onChange={this.handleChange.bind(this)}
            />
            <p className="help">
              The limit used in the default select from the sidebar context
              menu.
            </p>
          </div>
        </div>

        <div className="three fields">
          <div className="field">
            <Checkbox
              name="enabledAutoComplete"
              label="Auto Complete"
              defaultChecked={this.state.enabledAutoComplete}
              onChecked={() => this.setState({ enabledAutoComplete: true })}
              onUnchecked={() => this.setState({ enabledAutoComplete: false })}
            />
            <p className="help">
              Enable/Disable auto complete for the query box.
            </p>
          </div>
          <div className="field">
            <Checkbox
              name="enabledLiveAutoComplete"
              label="Live Auto Complete"
              defaultChecked={this.state.enabledLiveAutoComplete}
              onChecked={() => this.setState({ enabledLiveAutoComplete: true })}
              onUnchecked={() =>
                this.setState({ enabledLiveAutoComplete: false })
              }
            />
            <p className="help">
              Enable/Disable live auto complete for the query box.
            </p>
          </div>
          <div className="field">
            <Checkbox
              name="enabledDarkTheme"
              label="Dark Theme"
              defaultChecked={this.state.enabledDarkTheme}
              onChecked={() => this.setState({ enabledDarkTheme: true })}
              onUnchecked={() => this.setState({ enabledDarkTheme: false })}
            />
            <p className="help">Enable/Disable dark theme.</p>
          </div>
        </div>
      </div>
    );
  }

  renderLoggingSettingsPanel() {
    const log = this.state.log || {};
    return (
      <React.Fragment>
        <Row><Form.Text>Logging</Form.Text></Row>
            <Row className="field">
            <OverlayTrigger placement="top"
              overlay={<Tooltip id="Tooltip" >Show logs in the dev tools panel.
              </Tooltip>} >
              <Checkbox
                name="log.console"
                label="Console"
                defaultChecked={log.console}
                onChecked={() =>
                  this.handleChange({
                    target: { name: 'log.console', value: true },
                  })
                }
                onUnchecked={() =>
                  this.handleChange({
                    target: { name: 'log.console', value: false },
                  })
                }
              />
            </OverlayTrigger>
            </Row>

            <Row className="field">
              <Checkbox
                name="log.file"
                label="File"
                defaultChecked={log.file}
                onChecked={() =>
                  this.handleChange({
                    target: { name: 'log.file', value: true },
                  })
                }
                onUnchecked={() =>
                  this.handleChange({
                    target: { name: 'log.file', value: false },
                  })
                }
              />
              <p className="help">Save logs into a file.</p>
            </Row>

        <Row className={`field ${this.highlightError('log.path')}`}>
              <label>Path</label>
              <div className="ui action input">
                <input
                  type="text"
                  name="log.path"
                  placeholder="~/.sqlectron.log"
                  value={log.path || ''}
                  onChange={this.handleChange.bind(this)}
                />
                <label
                  htmlFor="file.log.path"
                  className="ui icon button btn-file"
                >
                  <i className="file outline icon" />
                  <input
                    type="file"
                    id="file.log.path"
                    name="file.log.path"
                    onChange={this.handleChange.bind(this)}
                    style={{ display: 'none' }}
                  />
                </label>
              </div>
              <p className="help">Log file path.</p>
        </Row>
        <Row >
              <Form.Label>Level</Form.Label>
              <Select 
                name="log.level"
                styles={mystyles}
                options={[
                  { value: 'debug', label: 'Debug', icon: 'bug' },
                  { value: 'info', label: 'Info', icon: 'info' },
                  { value: 'warn', label: 'Warn', icon: 'warning sign' },
                  { value: 'error', label: 'Error', icon: 'remove circle' },
                ]}
                clearable={false}
                onChange={this.handleOnLogLevelChange.bind(this)}
                optionRenderer={this.renderLogLevelItem}
                valueRenderer={this.renderLogLevelItem}
                value={log.level || 'error'}
              />
        </Row>
      </React.Fragment>
    );
  }

  render() {
    return (
      <Modal
        id="settings-modal"
        show={this.props.modalOpen}
        onHide={()=>{}}
        closable="true"
        detachable="false"
        dimmer={'inverted'}
      >
        <Modal.Header>Settings</Modal.Header>
        <Modal.Body>
          <Form className="ui form">
            {this.renderBasicSettingsPanel()}
            {this.renderLoggingSettingsPanel()}
            {this.renderSettingsPath()}
          </Form>
        </Modal.Body>
        <Modal.Footer>{this.renderActionsPanel()}</Modal.Footer>
      </Modal>
    );
  }
}
